<template>
  <div class="login">
    <div class="login__content">
      <div class="login__content-title">TDF Login</div>

      <van-cell-group class="login__content-form">
        <van-field
          placeholder="请输入用户名"
          name="username"
          label="用户名"
          type="text"
          v-model="user.username"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          placeholder="请输入密码"
          name="password"
          label="密码"
          type="password"
          v-model="user.password"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <!--<van-field-->
          <!--placeholder="请输入验证码"-->
          <!--type="captchaCode"-->
          <!--v-model="user.captchaCode"-->
          <!--left-icon="lock"-->
        <!--/>-->
      </van-cell-group>
      <mouse-down @child-event="watchChildSuccess"></mouse-down>
      <br>
      <van-button type="primary" @click.native="handleLogin" size="large" block>登录</van-button>
      <van-button type="warning" @click.native="toRegister" size="large" block>注册</van-button>
      <!--<div class="drag" ref="dragDiv">-->
        <!--<div class="drag_bg"></div>-->
        <!--<div class="drag_text">{{confirmWords}}</div>-->
        <!--<div ref="moveDiv" @mousedown="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg" style="position: absolute;top: 0px;left: 0px;"></div>-->
      <!--</div>-->
    </div>
  </div>
</template>

<script>
  import {mapMutations} from "vuex";
  import {loginByUsername, getUserInfo} from "@/api/login";
  import MouseDown from "./components/MouseDown"
  import {Notify} from 'vant';
  export default {
    name: "Login",
    components: {
      MouseDown
    },
    data() {
      return {
        user: {
          username: "",
          password: "",
          captchaCode: ""
        },
        captchaCode:false
      };
    },
    methods: {
      ...mapMutations(["setToken", "setUserInfo"]),
      watchChildSuccess(data){
        console.info(data)
        this.captchaCode = data
      },
      handleLogin() {
        if(this.captchaCode){
          this.$store.dispatch('LoginByUsername', this.user).then(() => {
            this.$store.dispatch('GetUserInfo').then(() =>{
              this.$router.push({ path: this.redirect || '/' }, onComplete => { }, onAbort => { })
            })
          }).catch(() => {
            this.loading = false
          })
        }else{
          Notify('登录前请滑动验证');
        }
      },

      toRegister() {
        this.$router.replace('/register')
      },
    }
  };
</script>

<style lang="scss" scoped>
  .login {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    &__content {
      &-title {
        font-size: 24px;
        font-weight: 700;
        text-align: center;
      }

      &-form {
        margin: 20px 0;
      }
    }
  }
</style>
